<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/3 w-full !md:mt-0"
        :class="{ '!md:mr-10px': index + 1 < 3, '!mt-10px': index > 0 }">
        <div>
          <div class="p-2 px-4 flex justify-between">
            <span>{{ item.title1 }}</span>
            <CountTo :startVal="1" :endVal="item.total1" />
          </div>
          <div class="p-2 px-4">
            <a-progress :percent="item.percent1" size="small" />
          </div>
        </div>
        <div>
          <div class="p-2 px-4 flex justify-between">
            <span>{{ item.title2 }}</span>
            <CountTo :startVal="1" :endVal="item.total2" />
          </div>
          <div class="p-2 px-4 flex">
            <a-progress :percent="item.percent2" size="small" />
          </div>
        </div>
      </Card>
    </template>
    <VisitSource :loading="loading" />
  </div>
</template>
<script lang="ts" setup>
  import { CountTo } from '/@/components/CountTo/index';
  import { Card } from 'ant-design-vue';
  import { growCardList } from '../data';
  import VisitSource from "/@/views/testDemo/echarDemo/components/VisitSource.vue";

  defineProps({
    loading: {
      type: Boolean,
    },
  });
</script>
